<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router-3.4.9.js"></script>
</head>
<body>
<div id="app">
  <a href="#/login">登录</a>
  <a href="#/register">注册</a>
  <hr>
<!--  router-link 标签 无需链接以#开头-->
  <router-link to="login">登录</router-link>
  <router-link to="register">注册</router-link>
  <router-view></router-view>

</div>
<!--引入vue 和vue-router的js文件-->
<!--注意 要先引入vue 再引入vue-router-->

<!--1 定义组件模板-->
<template id="login-form">
  <div>
    <form action="">
      用户名: <input type="text"> <br>
      密码: <input type="password"> <br>
      <input type="submit" value="登录">
    </form>
  </div>
</template>

<template id="register-form">
  <div>
    <form action="">
      用户名: <input type="text"> <br>
      密码: <input type="password"> <br>
      确认密码: <input type="password"> <br>
      <input type="submit" value="注册">
    </form>
  </div>
</template>


<script>
  //定义组件
 const loginForm = {
   template:"#login-form"
 }

 const register = {
   template: "#register-form"
 }
  //3 创建路由对象 定义路由规则
  const router = new VueRouter({

    routes:[
        //添加一个默认的路由规则 默认显示 自动导航到login
      {name:"default",path: "/",redirect:"/login"},
      {name:"login",path:"/login",component:loginForm},
      {name: "register",path:"/register",component: register}
    ]

  })

  //4 在vue 实例中 配置router
const vm = new Vue({
  el:"#app",
  router:router


})

</script>

</body>
</html>